class MpDivider extends HTMLElement {
  static get observedAttributes() {
    return ["orientation"];
  }

  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  connectedCallback() {
    this.render();
  }

  render() {
    const orientation = this.getAttribute("orientation") || "horizontal";
    this.shadowRoot.innerHTML = `
        <style>
          @import url('./src/mp-design-tokens/components-styles/Divider.css');
        </style>
        <div class="divider-${orientation}"></div>
      `;
  }
}

customElements.define("mp-divider", MpDivider);
